<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '首页'
  },
}
</route>

<template>
  <view class="page">
    <image
      class="w-full"
      src="@/static/images/bg.png"
      mode="widthFix"
    />
    <view class="home-box">
      <sar-grid root-class="grid">
        <sar-grid-item v-for="item in appList" :key="item.name" :text="item.name" :icon="item.icon" icon-size="38px" />
      </sar-grid>
    </view>

    <HomeNotice></HomeNotice>

    <gi-card type="second" title="审批中心" :body-style="{ backgroundColor: 'transparent' }">
      <sar-row gap="10px">
        <sar-col>
          <view class="approve-item approve-item__left">
            <text>待我审批</text>
            <text class="value">{{ 120 }}</text>
            <image class="icon" src="@/static/images/home/approve1.png" mode="scaleToFill" />
          </view>
        </sar-col>
        <sar-col>
          <view class="approve-item approve-item__right">
            <text>我已审批</text>
            <text class="value">{{ 200 }}</text>
            <image class="icon" src="@/static/images/home/approve2.png" mode="scaleToFill" />
          </view>
        </sar-col>
      </sar-row>
    </gi-card>

    <gi-card type="second" title="审批中心" :body-style="{ backgroundColor: 'transparent' }">
      <view class="task-box">
        <sar-empty />
      </view>
    </gi-card>

    <gi-card type="second" title="任务统计">
      <HomeChart></HomeChart>
    </gi-card>

    <gi-gap></gi-gap>
  </view>
</template>

<script lang="ts" setup>
import GJJH from '@/static/images/home/gjjh.png'
import JZYF from '@/static/images/home/jzyf.png'
import KCPD from '@/static/images/home/kcpd.png'
import LPQF from '@/static/images/home/lpqf.png'
import MORE from '@/static/images/home/more.png'
import QXDJ from '@/static/images/home/qxdj.png'
import SBTZ from '@/static/images/home/sbtz.png'
import WZCX from '@/static/images/home/wzcx.png'
import WZLY from '@/static/images/home/wzly.png'
import YHDJ from '@/static/images/home/yhdj.png'
import ZBJS from '@/static/images/home/zbjs.png'
import HomeChart from './components/HomeChart.vue'
import HomeNotice from './components/HomeNotice.vue'

interface AppListItem { name: string, icon: string }
const appList: AppListItem[] = [
  { name: '两票管理', icon: LPQF },
  { name: '设备扫码', icon: JZYF },
  { name: '库存查询', icon: WZCX },
  { name: '库存盘点', icon: KCPD },
  { name: '物资领用', icon: WZLY },
  { name: '工具借还', icon: GJJH },
  { name: '设备台账', icon: SBTZ },
  { name: '缺陷登记', icon: QXDJ },
  { name: '巡检点检', icon: ZBJS },
  { name: '纠正预防', icon: YHDJ },
  { name: '值班记事', icon: YHDJ },
  { name: '定值单', icon: YHDJ },
]
</script>

<style lang="scss" scope>
.home-box {
  padding: $padding;
  padding-top: 0;
  margin-top: -40px;

  .grid {
    border-radius: 8px;
    overflow: hidden;
  }
}

.approve-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 8px 8px 8px 8px;
  &__left {
    background: linear-gradient(127deg, #dae6f6 0%, #c9defb 100%);
  }
  &__right {
    background: linear-gradient(123deg, #dcf6e0 0%, #cbf8dc 100%);
  }
  .value {
    margin-left: 13px;
    font-size: 21px;
    font-weight: 500;
  }
  .icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 29px;
    height: 29px;
    transform: translateY(-50%);
  }
}

.task-box {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  overflow: hidden;
}
</style>
